<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>商品详情页</title>
<!-- amazeui -->
<link rel="stylesheet" type="text/css"
	href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
<!-- lib -->
<link rel="stylesheet" type="text/css"
	href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
<!-- app -->
<link rel="stylesheet" type="text/css"
	href="${BASE_PATH}/static/app/css/ui.css" />
<%-- <link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/base.css"/> --%>
<link rel="stylesheet" type="text/css"
	href="${BASE_PATH}/static/app/css/header.css" />
<link rel="stylesheet" type="text/css"
	href="${BASE_PATH}/static/app/css/swiper-3.4.0.min.css" />
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, hr, p, dl, dt, dd, ul, ol, li, pre, form,
	fieldset, legend, button, input, textarea, th, td {
	margin: 0;
	padding: 0
}

body {
	font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
		"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	background: #FFFFFF;
}

ul, li {
	margin: 0;
	padding: 0
}

ul, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

li, ul {
	list-style-type: none;
}

i {
	font-style: normal;
	font-weight: normal
}

.conter {
	margin-top: 38px;
}

.top {
	background: #FFFFFF;
}

.swiper-container img {
	width: 100%;
}

.swiper-container .swiper-pagination {
	margin-bottom: -5px;
}

.goods_name, .shop_place {
	padding-top: 5px;
	display: inline-block;
	width: calc(100% - 20px);
	margin-left: 10px;
	line-height: 17px;
	font-size: 16px;
	color: #5C5C67;
}

.shop_place {
	margin-top: -4px;
}

.price {
	display: inline-block;
	width: calc(100% - 20px);
	height: 33px;
	line-height: 33px;
	margin-left: 10px;
}

.kehuoprice {
	display: inline-block;
	width: calc(100% - 20px);
	height: 20px;
	line-height: 20px;
	margin-left: 10px;
}

.jifen_num {
	color: #F797B7;
	font-size: 16px;
}

.kehuojifen_num {
	color: #F797B7;
	font-size: 13px;
}

.geshu {
	color: #F797B7;
	font-size: 16px;
	float: right;
}

.three {
	display: inline-block;
	width: calc(100% - 20px);
	margin-left: 10px;
	height: 22px;
	/* 	border-bottom: 1px solid #EDEDED; */
	color: #a0a0a7;
	text-align: right;
}

.menshi {
	float: left;
	color:#9e9e9e;
}

.kucun {
	float: right;
}

.green {
	display: inline-block;
	width: calc(100% - 20px);
	height: 35px;
	margin-left: 10px;
	line-height: 35px;
	color: #BAE5F0;
	font-size: 16px;
	border-bottom: 1px solid rgba(228, 221, 221, 0.17);
}

.green img {
	width: 25px;
	height: 25px;
}

.right {
	margin-left: 10%;
}

.centert, .centerb, .bottom {
	margin-top: 10px;
	background: #FFFFFF;
}

.shangjia {
	display: inline-block;
	width: calc(100% - 20px);
	margin-left: 10px;
	height: 26px;
	line-height: 26px;
	border-bottom: 1px solid #fafafa;
	font-size: 12px;
	color: #a0a0a7;
}

.shop {
	width: calc(100% - 20px);
	margin-left: 10px;
	height: 60px;
	line-height: 60px;
	/*position: relative;*/
}

.shop span {
	/*width: 80%;*/
	display: block;
	color: #5C5C67;
}

.tit {
	float: left;
	width: calc(100% - 45px);
	line-height: 35px;
	font-size: 16px;
}

.nei {
	float: left;
	width: calc(100% - 45px);
	line-height: 14px;
	font-size: 12px;
}

.dianhua {
	line-height: 45px;
	float: right;
	margin-top: -33px;
	width: 45px;
	height: 45px;
	text-align: center;
	border-left: 1px solid #fafafa;
}

.shop i {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-left: 5px;
	margin-top: 10px;
	border-radius: 40px;
	background: url(${BASE_PATH}/static/app/img/dianhua.png) no-repeat 5px
		3px;
	background-size: 85%;
}

.shopping {
	display: inline-block;
	width: 100%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-size: 16px;
	color: #FFFFFF;
	background: #a9dde3;
	margin-top: 10px;
}

.goods_msg {
	display: inline-block;
	width: calc(100% - 20px);
	margin-left: 10px;
	/* height: 135px; */
	color: #5C5C67;
	font-size: 16px;
	border-bottom: 1px solid #fafafa;
}

.msg_t {
	display: inline-block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

.msg_t a {
	color: #5C5C67;
}

.msg_name {
	float: left;
}
/*  .msg_num{
				margin-left:150px;
			}   */
.msg_jifen {
	float: right;
	/* margin-right: 10px; */
}

.msg_b {
	display: inline-block;
	width: 100%;
	height: 60px;
	margin-top: 25px;
}

.green .img {
	width: 26px;
	height: 26px;
	float: right;
	margin-top: 2.5px;
}

.xuzhi {
	display: inline-block;
	width: calc(100% - 20px);
	margin-left: 10px;
	margin-top: 15px;
}

.xuzhi i {
	display: inline-block;
	width: 100%;
}

.xuzhi_tit {
	color: #fbc578;
	font-size: 16px;
}

.xuzhi {
	color: #85858d;
	font-size: 16px;
}

.bottom {
	padding-bottom: 50px;
}

footer {
	height: 49px;
	width: 100%;
	background: #FFFFFF;
	position: fixed;
	bottom: 0px;
}

.shoucang, .pay {
	width: 50%;
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	float: left;
	text-align: center;
}

.shoucang {
	height: 49px;
	border-top: 1px solid #EDEDED;
	color: #5C5C67;
	line-height: 50px;
	text-align: center;
}

.star {
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin-bottom: -4px;
	margin-right: 5px;
	display: inline-block;
	background: url(${BASE_PATH}/static/app/img/btn_nor_guanzhu.png)
		no-repeat 0 0;
	background-size: 100%;
}

.on {
	background: url(${BASE_PATH}/static/app/img/guanzhuxuanzhong.png)
		no-repeat 0 0;
	background-size: 100%;
}

.pay {
	color: #FFFFFF;
	background: #8ed1d8;
	line-height: 50px;
}

.logo_text {
	height: 40px;
	line-height: 40px;
	display: inline-block;
	color: #595b60;
	font-size: 14px;
	float: left;
}
.guize{
    display: inline-block;
    font-size: 12px;
    text-decoration: underline;
    margin-left: 8%;
}
.maskbox{
    position: absolute;
    top: 0;
    z-index: -999;
    height: 100%;
    padding-top:30px;
    opacity: 0;
    background:rgba(40, 37, 37, 0.49);
}
.maskbox h3{
    text-align: center;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 5px;
}
.mask{
    position: relative;
    width: 83%;
    margin:9% auto  0;
    background: #ffffff;
    border-radius: 5px;
    color: #464646;
}
.mask-text{
    width: 94%;
    margin: 0 auto;
    padding-left: 5px;
    padding-bottom: 15px;
    }
.mask-text span{
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    padding-bottom: 10px;
    color: #949292;
    padding-top: 10px;
   
}    
.mask-submit{
   display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #afdada;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
}  
/* 支付类型规格遮罩 */ 
.pay-warp{
    display:none;
    position: fixed;
    top: 0;    
    background: rgba(117, 113, 113, 0.74);
     width: 100%;
    height: 100%;
    z-index: -999;
} 
.pay-goods{
    position: absolute;
    bottom: 0;
    background: #fff;
    width: 100%;
}
.pay-right{
   display: inline-block;
   margin-left: 1rem;
   vertical-align: middle;
}
.pay-right em{
  		font-style: normal;
    	display: block;
    	    margin-top: 1.8rem;
}
.pay-goods-detail{
		color: #646464;
      	border-bottom:1px solid #EDEDED;
      	padding: 1.5rem 0;
}
.pay-goods-content{
   padding: 1.8rem 1.5rem 0;
}
.pay-type, .pay-guige{
    border-bottom: 1px solid #EDEDED;
    padding-bottom: 1.8rem;
}
.pay-type {  
    padding-bottom: 0rem;
}
.pay-type h4{
           padding: 1rem 0;
           font-size: 16px;
    color: #909090;
    font-weight: normal;
} 
.pay-type span{
    display: inline-block;
    border: 1px solid #b2b3b8;
    padding: .4rem 1.4rem;
    border-radius: 5px;
    margin-bottom: 1.8rem;
}
.pay-type span:NTH-OF-TYPE(2){
  margin: 0 .5rem;
}
.pay-guige h4{
   padding-top: 1rem;
       font-size: 16px;
    color: #909090;
    font-weight: normal;
} 
.pay-guige span{
    display: inline-block;
    border: 1px solid #b2b3b8;
    padding: .4rem 1.4rem;
    border-radius: 5px;
    margin-right: .5rem;
    margin-top: .8rem;
}
.pay-goods .subOrder{  
    display: inline-block;
    width: 100%;
    height: 5rem;
    background: #f797b7;
    line-height: 5rem;
    text-align: center;
    color: #fff;
    font-size: 18px;
}
.pay-num{
    padding: 2rem 0rem;
    font-size: 16px;
    color: #909090;
}
.pay-num-btn{
    background: #d6d7dc;
    color: #fff;
    border: 0;
    padding: .8rem 1.5rem;
    border-radius: 5px;
}
.pay-btns{
 	float: right;
}
.pay-btns input{
    width:2.5rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border:0;
}
.pay-goods-detail img{
    width: 11rem;
    height:11rem;
}
.pay-goods-name {
    display: inline-block;
    color: #f797b7;
    border: 1px solid #f797b7;
    padding: 2px;
    border-radius: 3px;
    font-size: 12px;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#payment-type-on,#spec-type-on{
    color:#f797b7;
    border:1px solid #f797b7;

}
.pay-close{
   position: absolute;
   right: 2rem;
   top: .2rem;  
   border:1px solid #dedede;
   padding:1px 5px;
   border-radius:3px;
}
.pay-right span i{
  font-style:normal;
  color:#f797b7;
  
}
.pay-right h3{
    font-size: 16px;
    font-weight: normal;
    color: #323232;
}
.type-guige{
    height: 20rem;
    overflow: scroll;
}
</style>
</head>
<body>
	<div class="container">
		<header>
			<div class="header">
				<span class="back" onclick="javascript:history.go(-1);"></span> <a
					href="${BASE_PATH}/index"><span class="logo_pic"></span></a> <span
					class="logo_text">OK 妈咪  </span>
			</div>
		</header>
		<div class="conter">
			<div class="top">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<c:if test="${fn:length(adList) > 0}">
							<c:forEach var="ad" items="${adList}" varStatus="s">
								<div class="swiper-slide">
									<img src="${FTP_PATH}${ad.thumb}" alt=""
										onerror="src='${BASE_PATH}/static/app/img/model.png';" />
								</div>
							</c:forEach>
						</c:if>
						<c:if test="${fn:length(adList) == 0}">
							<div class="swiper-slide">
								<img src="${BASE_PATH}/static/app/img/mode.png"
									class="lunbo-img" />
							</div>
						</c:if>
					</div>
					<div class="swiper-pagination"></div>
				</div>
				<span class="goods_name">${goods.name }</span> <span
					class="shop_place"> (<c:if test="${fn:length(store) > 0}">
						<c:if test="${fn:length(store) == 1}">
							<c:forEach var="ad" items="${store}" varStatus="s">
									${ad.title }
								</c:forEach>
						</c:if>
						<c:if test="${fn:length(store) > 1}">
								${fn:length(store)}家店铺有该商品
							</c:if>
					</c:if>)
				</span> <span class="price"><i class="jifen_num"> 
				<%-- 			<fmt:formatNumber type="number" value="${specs.integral}"
								pattern="0" maxFractionDigits="0" /> --%>
							   <c:if test="${type=='2'}">
								            <c:if test="${specs.integralType==1 }">商品积分</c:if>
											<c:if test="${specs.integralType==2 }">健康积分</c:if>
											<c:if test="${specs.integralType==3 }">教育积分</c:if>	 					                        
					                        <c:if test="${specs.integral>0 }">
												<i>  ${specs.integral }</i>  
					                        </c:if> 
					                        <c:if test="${specs.integral==-1 }">
												<i>  0</i>  
					                        </c:if>                  								
								</c:if>
								<c:if test="${type=='1'}"> 
				                       	   <c:choose>
				                       	   <c:when test="${specs.currency !=0}">
												    ¥  ${specs.currency }    
				                       	   </c:when>
				                       	   <c:otherwise>
				                       	   	此物品只能积分兑换
			                       	  	   </c:otherwise>
				                       	   </c:choose> 
								 </c:if>
							     <c:if test="${type=='3' }">
							               <c:if test="${specs.integCur_iType==1 }">商品积分</c:if>
											<c:if test="${specs.integCur_iType==2 }">健康积分</c:if>
											<c:if test="${specs.integCur_iType==3 }">教育积分</c:if>	
							               <span class="payment-type">${specs.integCur_i } + ¥ ${specs.integCur_c}</span>
							      </c:if>  	
				</i><i class="geshu"><c:if test="${goods.buytype==2 }">限兑${goods.buycount }个</c:if></i></span>
					<span class="kehuoprice">
							
							<c:if test="${ type==3}">
	                             <i class="kehuojifen_num">可获得：
	                                <fmt:formatNumber type="number" value="${specs.integCur_c * sppoint }" pattern="0" maxFractionDigits="0" />商品积分、<fmt:formatNumber type="number"
									value="${specs.integCur_c * jkpoint}" pattern="0"
									maxFractionDigits="0" />健康积分、<fmt:formatNumber type="number"
									value="${specs.integCur_c * jypoint }" pattern="0"
									maxFractionDigits="0" />教育积分
						           </i>
							</c:if>
							<c:if  test="${type==1}">
                       			<i class="kehuojifen_num">可获得：
                       			<c:if test="${specs.currency>0 }">
									<fmt:formatNumber type="number" value="${specs.currency * sppoint }" pattern="0" maxFractionDigits="0" />商品积分、<fmt:formatNumber type="number"
									value="${specs.currency * jkpoint}" pattern="0"
									maxFractionDigits="0" />健康积分、<fmt:formatNumber type="number"
									value="${specs.currency * jypoint }" pattern="0"
									maxFractionDigits="0" />教育积分	    
		                        </c:if> 
		                        <c:if test="${specs.currency==-1 }">
									<fmt:formatNumber type="number" value="0" pattern="0" maxFractionDigits="0" />商品积分、<fmt:formatNumber type="number"
									value="0" pattern="0"
									maxFractionDigits="0" />健康积分、<fmt:formatNumber type="number"
									value="0" pattern="0"
									maxFractionDigits="0" />教育积分
		                        </c:if> 
					           </i>
		                       </c:if>
		                       <c:if  test="${ type==2}">
		                       			 <i class="kehuojifen_num">可获得：
		                                <fmt:formatNumber type="number" value="0" pattern="0" maxFractionDigits="0" />商品积分、<fmt:formatNumber type="number"
										value="0" pattern="0"
										maxFractionDigits="0" />健康积分、<fmt:formatNumber type="number"
										value="0" pattern="0"
										maxFractionDigits="0" />教育积分
							           </i>		                       									    
		                       </c:if>		             	  
					</span>
			
				<span class="three">
					<i class="menshi">门市价:¥ <fmt:formatNumber type="number" value="${specs.marketPrice}" pattern="0.00"
							maxFractionDigits="2" /></i>
					<i class="yishou">已销售${goods.saleCount }</i>
					<i class="kucun"><c:if test="${goods.stockNum ==0}">售罄</c:if> 
									 <c:if test="${goods.stockNum >0}">库存 ${goods.stockNum }</c:if></i>
				</span> 
				<span class="green">
				<i class="left"><img src="${BASE_PATH}/static/app/img/duigou.png" class="green_img" />				
				 <c:choose>
                       <c:when test="${goods.integral!=0 }">   
                                                                        随时退		                       
                        </c:when>
                       <c:otherwise>  
                           <c:if test="${goods.currency !=0}">
                             7天内可退
                           </c:if>
                       </c:otherwise>				  
				 </c:choose>
				 <c:if test="${goods.integral != 0 || goods.integCur_i != 0&&goods.paytype == 1 || goods.currency != 0&&goods.goodtype ==1}">
					<i class="right"><img src="${BASE_PATH}/static/app/img/duigou.png" class="green_img" />过期自动退</i>
				</c:if>
			<%-- <c:if test="${goods.integral>0 }">随时退</c:if>
				<c:if test="${goods.currency > 0 }">7天内可退</c:if></i> 
				<c:if test="${goods.type == 2 || goods.type == 3&&goods.paytype == 1 || goods.type == 1&&goods.goodtype ==1}">
					<i class="right"><img src="${BASE_PATH}/static/app/img/duigou.png" class="green_img" />过期自动退</i>
				</c:if> --%>
				<i class="guize">规则说明?</i>
				</span>
			</div>
			<div class="centert">
				<span class="shangjia" style="display: none;" id="hideshop">商家信息</span>
				<div class="shop" style="display: none" id="hideshop1">
					<a href="${BATH_PATH }/goods/shopInfo/${store1.storeid}">
					<span class="tit" id="storeid" style="display:none">${store1.storeid }</span>
						<span class="tit">${store1.title }</span> <span class="nei">${store1.address }</span></a>
					<a href="tel:${store1.tel }"><span class="dianhua"><i></i></span></a>
				</div>
				<c:if test="${fn:length(store) > 1}">
					<span class="shopping"
						onclick="chakan(${goods.id},'${store1.storeid }','${store1.sellerId }');">选择您想要兑换提货的店铺</span>
				</c:if>
				<c:if test="${fn:length(store) == 1}">
					<!-- <span class="shopping" style="background-color: #ddd;">选择您想要兑换提货的店铺</span> -->
				    <div class="shop">
						<a href="${BATH_PATH }/goods/shopInfo/${store1.storeid}">
						<span class="tit" id="storeid" style="display:none">${store1.storeid }</span>
							<span class="tit">${store1.title }</span> <span class="nei">${store1.address }</span></a>
						<a href="tel:${store1.tel }"><span class="dianhua"><i></i></span></a>
				    </div>
				</c:if>
			</div>
			<div class="centerb">
				<span class="shangjia">套餐</span> <span class="goods_msg"> <c:if
						test="${fn:length(goodItem) > 0}">
						<c:forEach var="ad" items="${goodItem}" varStatus="s">
							<i class="msg_t"><a class="msg_name">${ad.itemname }</a><a
								class="msg_num">${ad.itemnum }</a><a class="msg_jifen">${ad.itemmoney }</a></i>
						</c:forEach>
					</c:if> <c:if test="${not empty goods.kemark }">
						<i class="msg_b">${goods.kemark }</i>
					</c:if>
				</span> <span class="green" onclick="detail();">查看宝贝图文详情 <img
					class="img" src="${BASE_PATH}/static/app/img/youjiantoupng.png" />
				</span>
			</div>
			<div class="bottom">
				<span class="shangjia">购买须知</span> <span class="xuzhi"> <c:if
						test="${goods.goodtype ==1 }">
						<i class="xuzhi_tit">有效期：</i>
						<i class="xuzhi_text">下单后7日内为兑换有效期</i>
					</c:if> <c:if test="${goods.goodtype ==2 }">
						<i class="xuzhi_tit">有效期：</i>
						<c:if test="${goods.times ==1 }">
							<i class="xuzhi_text">${goods.starttime } 至 ${goods.endtime }</i>
						</c:if>
						<c:if test="${goods.times ==2 }">
							<i class="xuzhi_text">${goods.tuanStarttime } 至
								${goods.tuanEndtime }</i>
						</c:if>
					</c:if>

				</span> <span class="xuzhi"> <i class="xuzhi_tit">可用时间：</i> <c:if
						test="${goods.timetype==1 }">
						<i class="xuzhi_text">周一至周日随时使用</i>
					</c:if> <c:if test="${goods.timetype==2 }">
						<i class="xuzhi_text"> <c:if test="${goods.busetime==1 }">周一</c:if>
							<c:if test="${goods.busetime==2 }">周二</c:if> <c:if
								test="${goods.busetime==3 }">周三</c:if> <c:if
								test="${goods.busetime==4 }">周四</c:if> <c:if
								test="${goods.busetime==5 }">周五</c:if> <c:if
								test="${goods.busetime==6 }">周六</c:if> <c:if
								test="${goods.busetime==7 }">周日</c:if> 至 <c:if
								test="${goods.eusertime==1 }">周一</c:if> <c:if
								test="${goods.eusertime==2 }">周二</c:if> <c:if
								test="${goods.eusertime==3 }">周三</c:if> <c:if
								test="${goods.eusertime==4 }">周四</c:if> <c:if
								test="${goods.eusertime==5 }">周五</c:if> <c:if
								test="${goods.eusertime==6 }">周六</c:if> <c:if
								test="${goods.eusertime==7 }">周日</c:if> 使用
						</i>
					</c:if>
				</span> <span class="xuzhi"> <i class="xuzhi_tit">预约信息：</i> <c:if
						test="${goods.yutype==1 }">
						<i class="xuzhi_text">无需预约</i>
					</c:if> <c:if test="${goods.yutype==2 }">
						<i class="xuzhi_text">请您提前${goods.yuday }天预约</i>
					</c:if>
				</span>
				<c:if test="${goods.couper ne 0 }">
					<span class="xuzhi"> <i class="xuzhi_tit">适用人数：</i> <c:if
							test="${goods.couper==1 }">
							<i class="xuzhi_text">不限人数</i>
						</c:if> <c:if test="${goods.couper==2 }">
							<i class="xuzhi_text">建议${goods.jyrs }人使用</i>
						</c:if> <c:if test="${goods.couper==3 }">
							<i class="xuzhi_text">限制${goods.zdrs }人使用</i>
						</c:if>
					</span>
				</c:if>
				<c:if test="${goods.shiyongren ne 0 }">
					<span class="xuzhi"> <i class="xuzhi_tit">使用人群：</i> <c:if
							test="${goods.shiyongren==1 }">
							<i class="xuzhi_text">男女通用</i>
						</c:if> <c:if test="${goods.shiyongren==2 }">
							<i class="xuzhi_text">仅限女宾</i>
						</c:if> <c:if test="${goods.shiyongren==3 }">
							<i class="xuzhi_text">仅限男宾</i>
						</c:if>
					</span>
				</c:if>
				<span class="xuzhi"> <i class="xuzhi_tit">使用规则：</i> <c:if
						test="${goods.regul==1 }">
						<i class="xuzhi_text">不与其他优惠同享</i>
					</c:if> <c:if test="${goods.regul==2 }">
						<i class="xuzhi_text">可与其他优惠同享，但不可叠加使用</i>
					</c:if>
				</span> <span class="xuzhi"> <i class="xuzhi_tit">补充说明：</i> <i
					class="xuzhi_text">${goods.content }</i>
				</span>
			</div>
		</div>
		<footer>
			<div class="shoucang">
				<c:if test="${goods.isCollected == 0}">
					<span class="star"></span>
				</c:if>
				<c:if test="${goods.isCollected == 1}">
					<span class="star on"></span>
				</c:if>
				收藏(<span id="collectedCount">${goods.collectedCount}</span>)
			</div>			
		  	<c:choose>
				<c:when test="${goods.type eq 2 }"><div class="pay pay-selection">立即兑换</div></c:when>		
				<c:otherwise><div class="pay pay-selection">立即购买</div></c:otherwise>
		   	</c:choose>
	
		</footer>
	</div>
	<!-- 遮罩 -->
	<div class="maskbox">
	    <div class="mask">
	        <h3>说明</h3>
	        <div class="mask-text">
	            <p><b>纯积分</b>的商品，在有效期内可随时申请退款，过期后自动退款。</p>
		        <p><b>现金+商品积分</b>的商品，在7天内可申请退款，超过7天未到店兑换时，视为过期订单，系统会自动退款给会员。</p>
		        <p><b>现金+健康/教育积分</b>的商品，在7天内可申请退款，超过7天则不能再申请退款。</p>
		        <p><b>纯现金的实物类商品</b>在7天内可申请退款，超过7天未到店兑换时，视为过期订单，系统会自动退款给会员。</p>
                <p><b>纯现金的服务类</b>的商品，在7天内可申请退款，超过7天则不能再申请退款。</p>
                <span>有疑问可致电：0371-58638886</span>
	        </div> 
	         <span class="mask-submit">确定</span>
	    </div>	   
	</div>
	<div class="pay-warp">	
		<div class="pay-goods">
		   <div class="pay-goods-content">
				<div class="pay-goods-detail">
				    <img class="pay-img" src="${FTP_PATH}${goods.thumb}" />
				    <div class="pay-right">
				       <h3>
				          <span id="pay-type-Price">

								<c:if test="${type=='2'}">
						             <c:if test="${specs.integralType==1 }">商品积分</c:if>
									<c:if test="${specs.integralType==2 }">健康积分</c:if>
									<c:if test="${specs.integralType==3 }">教育积分</c:if>
									<c:if test="${specs.integral>0 }">
										<i> ${specs.integral }</i>  
			                        </c:if> 
			                        <c:if test="${specs.integral==-1 }">
										<i> 0</i>  
			                        </c:if>               								
								</c:if>
								<c:if test="${type=='1'}">								   
										<i>¥  ${specs.currency }</i>      			                       	   
								 </c:if>
							     <c:if test="${type=='3' }">
							               <c:if test="${specs.integCur_iType==1 }">商品积分</c:if>
											<c:if test="${specs.integCur_iType==2 }">健康积分</c:if>
											<c:if test="${specs.integCur_iType==3 }">教育积分</c:if>	
							               <span class="payment-type"><i>${specs.integCur_i } + ¥ ${specs.integCur_c}</i></span>
							      </c:if> 
                             </span>
				           <span class="pay-close">关闭</span></h3>
				       <span>门市价：
				           ¥ <s id="marketPrice">${specs.marketPrice }</s>
					   </span>
				       <em>已选项目</em>
				        <span class="pay-goods-name">${specs.specTitle }</span> 
				    </div>   
				</div>
				<div class="type-guige">
					<div class="pay-type">
				       <h4>支付方式</h4>
				       <div class="pay-payType">			             
					       <c:if test="${specs.integral>0||specs.integral==-1}">
					            <span class="pay-type-btn" payType="1" <c:if test="${type==2}">id="payment-type-on"</c:if> >积分支付</span>
					       </c:if>				      
					       <c:if test="${specs.currency>0}">
					            <span class="pay-type-btn" payType="2"  <c:if test="${type==1}">id="payment-type-on"</c:if> >现金支付</span>
					       </c:if>
					        <c:if test="${specs.integCur_i!=0 }">
					            <span class="pay-type-btn" payType="3"  <c:if test="${type==3}">id="payment-type-on"</c:if> >积分+现金支付</span>
					       </c:if>
				       </div>
				        
				    </div>
				     <div class="pay-guige">
				       <h4>规格 <i class="geshu"><c:if test="${goods.buytype==2 }">限兑${goods.buycount }个</c:if></i></h4>
				       
				       <c:forEach var="spec" items="${specsList}" >
							<span class="spec-type" tip="${spec.id}">${spec.specTitle }</span>								
					   </c:forEach>   
				    </div>
				</div>
			    
			     <div class="pay-num">
			       <span>购买数量</span>
			       <span class="pay-btns">
			           <a href="javascript:" class="pay-num-btn" id="addNum">+</a>
				       <input type="text" value="1" id="payNum">
				       <a href="javascript:" class="pay-num-btn" id="reduceNum">-</a>
			       </span>  
			    </div>		        
		    </div>
		       <a href="javascript:goPaybuy()" class="subOrder">提交订单</a>
		</div>		
	</div>
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
	<!-- amazeui -->
	<script type="text/javascript"
		src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
	<!-- lib -->
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/layer/layer.js"></script>
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/template/template.js"></script>
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
	<script type="text/javascript"
		src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
	<!-- app -->
	<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
	<script type="text/javascript"
		src="${BASE_PATH}/static/app/js/swiper-3.4.0.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	$(active);	     
	 var active="${active}";
	 var type="${type}";//支付类型
	 var buytype="${goods.buytype}"; //是否限购
	 function active(){
    	  var hideshop=document.getElementById("hideshop");
		   var hideshop1=document.getElementById("hideshop1");
		   if(active=="2"){
			   hideshop.style.display="block";
			   hideshop1.style.display="block";
		   }else{
			   hideshop.style.display="none";
			   hideshop1.style.display="none";
		   }	
      }
	 
		
			var mySwiper0 = new Swiper ('.swiper-container', {
			    direction: 'horizontal',
			    loop: true,
			    pagination: '.swiper-pagination',
			    observer:true,//修改swiper自己或子元素时，自动初始化swiper
				observeParents:true,//修改swiper的父元素时，自动初始化swiper
			});
			var width = $(".swiper-container img").width();
			$(".swiper-container img").height(width);
			var goods = {
			"id":"${goods.id}",
			"name":"${goods.name}",
			"spec":"${goods.spec}",
			"thumb":"${goods.thumb}",
			"pstate":"${goods.pstate}",
			"state":"${goods.state}",
			"buycount":"${goods.buycount}",
			"xCount":"${goods.xCount}",
			"tuistate":"${goods.tuistate}",
			"buytype":"${goods.buytype}"
			
			
			};
			$(".shoucang").click(function(){
				$(".star").toggleClass("on");
				doCollect();
			});
			var goodsid="${goodsid}";
			$(function(){
				 Kit.ajax.post("${BASE_PATH}/goods/getGoods",{goodsid:goodsid},function(result){
					if(result.flag==0){
						}else{
							window.history.go(-1);
						}
				}); 
			})
		function doCollect(){
			Kit.ajax.post("${BASE_PATH}/my/doCollect",{goodsid:goods.id},function(result){
				if(result.flag==0){
					var collectedCount = parseInt($("#collectedCount").text());
					if(result.object.isCancel==1){
						$("#collectedCount").html(collectedCount-1);
					}else{
						$("#collectedCount").html(collectedCount+1);
					}
				}
			});
		}
		 var storeid=$("#storeid").html();
		 function detail(){
			window.location.href="${BASE_PATH}/goods/detail?goods="+goods.id+"&storeid="+storeid;
		} 
		 /*
		 *支付类型与规格选择遮罩层
		 */
		 var userids="${userid}";
		  	 starttime="${goods.starttime}",//售卖开始时间
		     endtime="${goods.endtime}";//售卖结束时间
		     locationHref=window.location.href;
		
		 (function(){			 
			 var warp=document.querySelector(".pay-warp"),
		     pay=document.querySelector(".pay-selection"),
			 close=document.querySelector(".pay-close");
			 pay.onclick=function(){
				 if(userids=="0"){
						return window.location.href="${BASE_PATH}/regist";				 
					 }
			   var newDate=new Date().getTime();			      
			   		starttime=new Date(starttime).getTime();			    
			 		 endtime=new Date(endtime).getTime();			     
			       if(newDate>=starttime && newDate<endtime){			 
					   maskShowHide(warp, "1", "999", "block","fixed");					   
			       }else{
			    	   Kit.ui.alert("此商品不在售卖时间内");
			       }
				
			 }
			 //关闭购买遮罩层
			 close.onclick=function(){
				 maskShowHide(warp, "0", "-999", "none","static");
			 }	
		 })()


		 function goPaybuy(){
			 if(userids=="0"){
				 return window.location.href="${BASE_PATH}/regist";		 
			}
			 var buycount=parseInt(goods.buycount);
			 var xCount=parseInt(goods.xCount);
			 var buytype=parseInt(goods.buytype);
			 

			var payNum=document.querySelector("#payNum").value; 										   
				if(payNum-0>buycount && buytype==2){				   
				  Kit.ui.alert("您已达到限购数量暂无法购买");
				  $("#payNum").val("1"); 
				  return ;
			   }
			 /* 退款状态 */
			 var tuistate = parseInt(goods.tuistate);
			 if(parseInt(goods.pstate)==1 && parseInt(goods.state)==2){    //商品正常并且已上架
				 if(buytype==2 && xCount >= buycount ){
					  //如果已经退款，依然可以购买 
					/* if(tuistate==2){
						 window.location.href="${BASE_PATH}/order/saveOrder?goods="+goods.id+"&storeid="+storeid;
					 }else{ */
						 Kit.ui.alert("您已达到限购数量暂无法购买");
// 					   }  
				 }else{
					 //获取初始化的支付方式与规格
					 var pay=document.querySelector("#payment-type-on"),
					     payType=pay.getAttribute("payType"),					     
					     spec=document.querySelector("#spec-type-on"),
					     specType=spec.getAttribute("tip"),
					     payNum=document.querySelector("#payNum").value, 
					     marketPrice=document.querySelector("#marketPrice").innerHTML;
					 window.location.href="${BASE_PATH}/order/saveOrder?goods="+goods.id+"&storeid="+storeid+"&active="+active+"&payType="+payType+"&specType="+specType+"&payNum="+payNum+"&marketPrice="+marketPrice;
				 }
			 }else{
				 Kit.ui.alert("此商品售罄或已下架暂无法购买");
			 }
		 }
		 function chakan(goodsid,storeid,sellerId){
				window.location.href="${BASE_PATH}/goods/goodsOtherStore?storeid="+storeid+"&sellerId="+sellerId+"&goodsid="+goodsid;
			}
		
		 
		 
		var marketPrice=document.querySelector("#marketPrice");//门市价
		var checked="${type}";//选中的支付方式 
		// 选择规格(根据规格id)查询支付方式和价格
		function pageBySpec(){
			var spec=document.querySelector("#spec-type-on"),
			    specId=spec.getAttribute("tip");//选中的规格id
			Kit.ajax.post("${BASE_PATH}/goods/pageBySpec",{specId:specId},function(result){
				//点亮规格之前取支付方式
				checked=parseInt(document.querySelector("#payment-type-on").getAttribute("payType"));
				if(result.flag==0){					
					var payType=document.querySelector(".pay-payType"),	
					    Price=document.querySelector("#pay-type-Price"),					   
					    integral=result.object.integral,
					    currency=result.object.currency,
					    integCurI=result.object.integCur_i,
					    integCurC=result.object.integCur_c;
					marketPrice.innerHTML=result.object.marketPrice;//门市价
					payType.innerHTML=" "; 
				    /**
					*商品价格
					*/
                    //货币
					if(currency>0){						
						Price.innerHTML ="<i> ¥"+ doubleMoney(currency)+"</i>";
					}
					if(integral>0||integral==-1){						
						//商品积分类型			    						
						integralType(result.object.integralType,Price);
							//积分
							if(integral>0){
								Price.innerHTML+="<i>"+integral+"</i>";
							}else{
								Price.innerHTML += "<i>"+0+"</i>";
							}							
						}
					if(integCurI!=0){
						//商品积分类型		
						integCuriType(result.object.integCur_iType,Price);
						//积分+货币
						Price.innerHTML ="<i>"+ integCurI +" + ¥"+doubleMoney(integCurC) +"</i>";
					}
					//支付类型
				    if(integral>0||integral==-1){
				    	payType.innerHTML+='<span class="pay-type-btn" payType="1">积分支付</span>';
				    	
				    }
				    if (currency>0){
				    	payType.innerHTML+='<span class="pay-type-btn" payType="2">现金支付</span>';
				    	
				    }
				    if (integCurI!=0){
				    	payType.innerHTML+='<span class="pay-type-btn" payType="3">积分+现金支付</span>';
				    	
				    } 
				    payChoiceOn(payment,payId);
				}
			});
		}
		 
	
		 
		 //点亮选择的规格
		 choiceOn();
		 function choiceOn(){
			     var spec=document.querySelectorAll(".spec-type"),
			         payGoodsName=document.querySelector(".pay-goods-name");//已选项目
			     spec[0].id="spec-type-on";//初始默认选中第一个规格方式
			     for(var i=0;i<spec.length;i++){			    	 
			    	 spec[i].onclick=function(){
			    		 removeAttribute(spec,"id");//移除Id初始化样式
			    			this.id="spec-type-on";	//选中规格方式
			    			payGoodsName.innerHTML=this.innerHTML;
			    			pageBySpec();//查询选中规格的支付方式
			    	 }
			     } 
		 }
		 
		/**
		*点击支付方式时(根据规格id)获取商品价格或积分
		*/
		function Paylook(payId){
			var spec=document.querySelector("#spec-type-on"),
		        specId=spec.getAttribute("tip");//选中的规格id
			Kit.ajax.post("${BASE_PATH}/goods/pageByPaySpec",{goodsId:goods.id,payId:payId,specId:specId},function(result){
				if(result.flag==0){							
					var Price=document.querySelector("#pay-type-Price"),
					    integral=result.object.integral,
					    currency=result.object.currency,
					    integCurI=result.object.integCur_i,
					    integCurC=result.object.integCur_c;
					Price.innerHTML=" ";
					if(payId ==1){
						//积分支付
						integralType(result.object.integralType,Price);
						if(integral>0){
							Price.innerHTML+="<i>"+integral+"</i>";
						}else{
							Price.innerHTML+="<i>"+0+"</i>";
						}
						
					}else if(payId ==2){
						//货币支付					
						Price.innerHTML +="<i>"+"¥ "+doubleMoney(currency)+"</i>";
					}else if(payId ==3){
						//积分+货币支付
						//商品积分类型		    						
						integCuriType(result.object.integCur_iType,Price);
						Price.innerHTML += "<i>"+integCurI + " + ¥"+ doubleMoney(integCurC)+"</i>";
					}
					
				}
			});
		}
		/* 
		*点亮选择的支付方式
		*/  
		 var  payment=document.querySelectorAll(".pay-type-btn");//获取所有支付方式			       
              payId="";//支付类型  
          onPayment(payment,payId);
              //給每個支付方式绑定点击事件
		  function onPayment(payment,payId){
			  for(var i=0;i<payment.length;i++){	
			    	 payment[i].onclick=function(){		
			    		 removeAttribute(payment,"id");//移除Id初始化样式
			    			this.id="payment-type-on";
			    			check=this.check;
			    			payId=this.getAttribute("payType");	
			    			Paylook(payId);
			    	 }
			     }
		   }
		 function payChoiceOn(payment,payId){			 
			   var  payment=document.querySelectorAll(".pay-type-btn");//获取所有支付方式			       
	               payId="";//支付类型      	  
		   		   payment[checked-1].id="payment-type-on"; //点亮
		   		   payId=checked;
		    	   Paylook(payId);				
		    	   onPayment(payment,payId);				    
		 }		 
		 
		 //单独积分类型判断
		   function integralType(integralType,Price){
			 //商品积分类型				    						
				 if(integralType==1){
			    		Price.innerHTML ="商品积分 ";
			    	}else if(integralType==2 ){
			    		Price.innerHTML ="健康积分 ";
			    	}else{
			    		Price.innerHTML ="教育积分 ";
			    	}
		   }
		   //积分+货币的积分类型判断
		   function integCuriType(integCur_iType,Price){
				 //商品积分类型				    						
				 if(integCur_iType==1){
			    		Price.innerHTML ="商品积分 ";
			    	}else if(integCur_iType==2){
			    		Price.innerHTML ="健康积分 ";
			    	}else if(integCur_iType==3){
			    		Price.innerHTML ="教育积分 ";
			    	}
			
			   }
		/**
		  *规则说明遮罩层
		  */ 
		 !function(){
			
			   var box=document.querySelector(".guize"),
			       mask=document.querySelector(".maskbox"),
			       close=document.querySelector(".mask-submit"); 			     
			   box.onclick=function(){				   
				    maskShowHide(mask,"1","999","block","fixed"); //显示遮罩层
			   }
			   close.onclick=function(){				 	   
				  maskShowHide(mask,"0","-999","none","static"); //隐藏遮罩层
			   }
				 /*
				 * 商品数量
				 */		
				 var reduceNum=document.querySelector("#reduceNum"); 
				 var addNum=document.querySelector("#addNum"); 
				 var payNum=document.querySelector("#payNum"); 
				
				 addNum.onclick=function(){
					
					payNum.value++;
					buycount();//数量限制判断
				 }				 
				 reduceNum.onclick=function(){					
					 if(payNum.value>1){
						 payNum.value--;
					 }else{
						 Kit.ui.alert("购买数量最少为1");
					 }
				 }				
						
		   }()
		     $("#payNum").change(function(){
		    	 buycount()
			});  
		   /* 产品数量是否限制判断 */
			 function buycount(){
				 var buycount="${goods.buycount }";
				 var buytype="${goods.buytype}"; 
				 var payNum=document.querySelector("#payNum").value; 										   
					   if(payNum-0>buycount && buytype==2){
						   
						  Kit.ui.alert("您已达到限购数量暂无法购买");
						$("#payNum").val("1"); 
						  return ;
					   }						   
			 }	
		  
		   //循环移除元素属性
		    function removeAttribute(obj,attribute){
					 for(var i=0;i<obj.length;i++){
						 obj[i].removeAttribute(attribute);
					 }
				 }
		 //遮罩层显示与隐藏
		   function maskShowHide(obj,opa,zIndex,isShow,location){
			   obj.style.opacity=opa;
			   obj.style.zIndex= zIndex;
			   obj.style.display= isShow;
			   document.querySelector("body").style.position=location;//定位为fixed时可禁止页面滚动
		   }
		 //格式化金额
		   function doubleMoney(n){
				if(n<1){
				return	n=n;
				}else{
				return	n=n+".0";
				}
			}
		</script>
		<script type="text/javascript">
				/**实现微信浏览器返回并强制刷新效果
				*跳转的页面放上以下代码 
				*/
				sessionStorage.setItem("need-refresh", true);
			</script>
</body>
</html>